<template>
    <div class="tree-ctrl-body" v-if="initHtmlModal">
      <div class="tree-table-ctrl">
        <div class="search-ctrl f-l" >
          <input type="text" class="search-text" :placeholder="initHtmlModal.tree.btns.rightBtns[0].placeholder">
          <button type="button" class="search-btn btn btn-info" @click="layoutClick(initHtmlModal.tree.btns.rightBtns[0].code)">{{initHtmlModal.tree.btns.rightBtns[0].name}}</button>
        </div>
        <div id="tree-dep"  class="ztree"></div>

       <!-- <div id="tree-dep2"  class="ztree"></div>:ajaxHtml=""-->
      </div>
      <div class="tree-table-ctrl">

        <TableHtml
        :tableHtml="initHtmlModal.table"
        :tableRowHtml="tableRowHtml"
        @seachTable="seachTable"
        @PageNew="tablePageData"
        @tableSuccess="tableSuccess"
          ></TableHtml>

      </div>
    </div>
</template>

<script>
    import TableHtml from "../indexMain/TableHtml"
    export default {
        name: "Tree",
        data(){
          return{

           nodes:[],

           setting : {
              data: {
                simpleData: {
                  enable: true
                },
              },
              check:{
                chkStyle:"checkbox",
                chkboxType:{ "Y": "ps", "N": "ps" },
                enable:true
              }
            },
            initHtmlModal:{},
            htmlAjax:{},
            tableRowHtml:{},
            cacheMappingTable:{},
            tableApi:{},
            apiParams:{}
          }
        },
        components:{
          TableHtml
        },
        methods:{
          layoutClick(code){
            layoutFn.btnsCodeFn(code);
          },
          tableAjaxHtml(ajxaObj,stationNode,tagId){ //树结构点击切换对应的部门人员列表
            ////console.log(ajxaObj);
            //console.log(stationNode);

            //表格请求方式
            this.tableApi = {
              url:this.initHtmlModal.tree.initData[0].click[0].url,
              apiType:this.initHtmlModal.tree.initData[0].click[0].httpType
            };
            //console.log(this.tableApi);

           //树结构默认参数设定
            this.apiParams = {};
            //缓存区
            let cacheMappingTable = {};
           // //console.log(this.initHtmlModal.tree.initData[0].click[0].params.length);
            if( this.initHtmlModal.tree != null ){

              for( let i=0;i<this.initHtmlModal.tree.initData[0].click[0].params.length;i++ ){
                let item = this.initHtmlModal.tree.initData[0].click[0].params[i];
                ////console.log(item);
                this.apiParams[item.name] = item.default;
              }
              //部门管理缓存区设定

              for( let key in this.initHtmlModal.tree.initData[0].click[0].cacheMapping ){
                cacheMappingTable[this.initHtmlModal.tree.initData[0].click[0].cacheMapping[key]] = stationNode[key];
              }

            }

            //缓存区存入页面储存
            sessionStorage.setItem("cacheMappingTable",JSON.stringify(cacheMappingTable));

            //混存取设置val
            //console.log(this.apiParams); //参数传递
            //console.log( JSON.parse(sessionStorage.getItem("cacheMappingTable")) ); //部门缓存区

            //获取页面储存缓存
            let stroageData = JSON.parse(sessionStorage.getItem("cacheMappingTable"));

            //树结构表格遍历缓存区替换默认
            this.tableAjaxParamsExtend(this.apiParams,stroageData);

            //console.log("↓树结构传递参数")
            //console.log(this.apiParams);

            //通知表格渲染  请求类型  请求地址  请求参数
            this.tableAxios(this.tableApi.apiType,this.tableApi.url,this.apiParams);

          },
          tablePageData(page){ //分页触发
            let stroageData = JSON.parse(sessionStorage.getItem("cacheMappingTable"));
            stroageData.pageNum = page;
            //修改项储存到公共缓存
            sessionStorage.setItem("cacheMappingTable",JSON.stringify(stroageData));
            this.tableAjaxParamsExtend(this.apiParams,stroageData);
            this.tableAxios(this.tableApi.apiType,this.tableApi.url,this.apiParams);
             ////console.log(this.apiParams);
          },
          seachTable(apiBtn){ //table搜索关键字
            //console.log(apiBtn);
            let stroageData = JSON.parse(sessionStorage.getItem("cacheMappingTable"));
            //console.log(stroageData);

            this.tableAjaxParamsExtend(this.apiParams,stroageData);
            //console.log(this.apiParams);
            this.tableAxios(apiBtn.apiType,apiBtn.url,this.apiParams);

          },
          tableSuccess(callbackParams){
            //console.log(callbackParams);
            this.tableAxios(callbackParams.apiType,callbackParams.url,this.apiParams);
          },
          tableAjaxParamsExtend(params,storageParams){ //为接口参数传递缓存区参数
            for( let apiKey in params ){
              for( let mapKey in storageParams ){
                if( apiKey === mapKey ){
                  params[apiKey] = storageParams[mapKey];
                }
              }
            }
          },

          tableAxios(apiType,url,params){ //通用渲染
              this.$axios[apiType](this.HOST+url,{
                params: params
              })
              .then((data)=>{
                //this.tableRowHtml = data.data;
                this.tableRowHtml = data;
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },

          newData(data){
            this.tableRowHtml = data.tableData;
            //console.log(this.tableRowHtml);
          },
          initTreeHtml(){
            const _this = this;
            $(function(){
              $.fn.zTree.init($("#tree-dep"), _this.setting, _this.nodes);
            });

          },
          ajxaTreeHtml(httpType,url,params){ //通用树渲染

          }
        },
        created(){
          this.initHtmlModal = JSON.parse(sessionStorage.getItem("initHtmlData"));
          if( this.initHtmlModal.tree.initData ){

            this.$axios[this.initHtmlModal.tree.initData[0].httpType](this.HOST+this.initHtmlModal.tree.initData[0].url)
            .then((data)=>{
              //console.log(data);
              this.nodes = data.data.data;
               this.initTreeHtml(); //树加载
            })
            .catch((err)=>{
              //console.log(err)
            })

          }
        },

        mounted(){
          //添加回调
          const _this = this;
          this.setting.callback = {
            onClick:function(event,treeId,treeNode){
              _this.tableAjaxHtml(_this.htmlAjax,treeNode)
            }
          };

          //console.log(this.initHtmlModal);
        },
    }
</script>

<style scoped>

</style>
